<!-- 成员管理页 -->
<template>
  <div>
    <span>
      <!-- 新增 -->
      <div>
        <el-tooltip effect="light" content='只有超级管理员才能新增成员' placement="right" :disabled="addBtnVisible">
          <span>
            <el-button @click="handleMemberDialog(0)" class="addMember" icon="Plus" :disabled="!addBtnVisible" >新增成员</el-button>
          </span>
        </el-tooltip>
        <el-dialog
          v-model="dialogMemberVisible"
          :title="formType==1 ? '编辑成员' : '新增成员'"
          :before-close="handleMemberClose"
          width="35%"
          align-center
        >
          <el-form ref="memberFormRef" :model="memberForm" :rules="rulesM">
            <!-- 昵称 -->
            <el-form-item label="昵称" prop="name" label-width="80px">
              <el-input
                v-model="memberForm.name"
                placeholder="请填写昵称"
                style="width: 220px"
                maxlength="10"
              />
            </el-form-item>
            <!-- 用户名 -->
            <el-form-item label="用户名" prop="username" label-width="80px">
              <el-input
                v-model="memberForm.username"
                placeholder="请填写用户名"
                style="width: 220px"
                maxlength="10"
                :disabled="formType==1"
              />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password" label-width="80px">
              <el-input
                v-model="memberForm.password"
                placeholder="请填写用户密码"
                style="width: 220px"
                maxlength="10"
              />
            </el-form-item>
            <!-- 备注 -->
            <el-form-item label="备注" prop="remarks" label-width="80px">
              <el-input
                v-model="memberForm.remarks"
                placeholder="请填写备注内容"
                style="width: 220px"
                maxlength="10"
              />
            </el-form-item>
            <!-- 权限 -->
            <el-form-item label="权限" prop="authority" label-width="80px">
              <el-select v-model="memberForm.authority" style="width: 220px; text-align: center" :disabled="userStore.authority!=0">
                <el-option label="超级管理员" :key="0" :value="0" style="text-align: center"/>
                <el-option label="管理员" :key="1" :value="1" style="text-align: center"/>
                <el-option label="普通成员" :key="2" :value="2" style="text-align: center"/>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 确认与取消 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submit(formType,memberForm)">确认</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </span>
  </div>
  <hr style="background-color: #e8e8e8; height: 2px; border: none" />
  <!-- 表格 -->
  <el-table :data="userInfoList" stripe style="width: 100%">
    <el-table-column prop="name" label="昵称" />
    <el-table-column prop="username" label="用户名" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="remarks" label="备注" />
    <el-table-column prop="authorityName" label="权限" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleMemberDialog(1,scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除？" @confirm="deleteOne(scope.row.userId,scope.$index)">
          <template #reference>
            <el-button link type="primary" size="small" :disabled="scope.row.authority==0">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
import { getUsersByAuth,deleteById,editByUserId,addUser } from '@/api/user'; 
import { userInfoStore } from '@/store';

const userStore = userInfoStore();

const memberFormRef = ref(null);
let dialogMemberVisible = ref(false);
let addBtnVisible = ref(false);
var formType = ref(1); // 0表示新增的浮窗 1表示编辑

//可见用户信息
const userInfoList = ref([])
//成员表单数据
const memberForm = reactive({
  userId: "",
  name: "",
  username: "",
  password: "",
  remarks: "",
  authority: 2,
});
//设置必填项
const rulesM = {
  name: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  authority: [{ required: true, message: "权限不能为空", trigger: "blur" }],
};
//打开浮窗
const handleMemberDialog = (type,data) => {
  formType.value = type;
  dialogMemberVisible.value = true;
  if(type==1){
    nextTick(() => {
      memberForm.userId = data.userId;
      memberForm.name = data.name;
      memberForm.username = data.username;
      memberForm.money = data.money;
      memberForm.password = data.password;
      memberForm.remarks = data.remarks;
      memberForm.authority = data.authority;
    })
  }
};
//弹窗关闭的时候
const handleMemberClose = () => {
  memberFormRef.value.resetFields();
  dialogMemberVisible.value = false;
};
//取消
const cancel = () => {
  handleMemberClose();
};
//提交用户表单
const submit = (type,userInfo) => {
  if(type==1){
    editByUserId(userInfo).then(() => {
      getUserList();
    });
  }else{
    addUser(userInfo).then(() => {
      getUserList();
    })
  }
  handleMemberClose();
};

const getUserList = () => {
  getUsersByAuth(userStore.authority).then((res) => {
    userInfoList.value = res.data;
  });
};

const deleteOne = (userId,index) => {
  deleteById(userId).then(()=>{
    userInfoList.value.splice(index,1);
  })
}

const handleAddBtnVisible = ()=> {
  addBtnVisible = (userStore.authority == 0) ? true : false;
}

onBeforeMount(() => {
  handleAddBtnVisible();
})

onMounted(() => {
  getUserList();
});

</script>

<style>
.el-table {
  /* font-size: 12px; */
  --el-table-header-bg-color: #a1a3a650;
}
.el-table .cell {
  text-align: center;
}

.el-table__inner-wrapper {
    height: 78vh;
}
</style>